<template>
  <div>
    <!-- 住户详情 -->
    <div :id="baseId">
      <personBase :reqId="reqId" :isPrint="isPrint" :baseInfo="applyinfo.base"></personBase>
    </div>
    <!-- 项目详情 -->
    <div id="projectInfo">
      <div class="qheader" :style="{borderBottom: '0px solid rgb(210,210,210)'}">
        <p>入驻项目信息</p>
      </div>
      <div class="gcontent">
        <Form :id="projectInfoId" ref="projectInfo3" :rules="validate2" :model="applyinfo.projectInfo" :label-width="labelWidth" label-position="left" class="form form_left">
          <Row>
            <Col span="8" class="step_4">
            <FormItem label="工单标题：" prop="reqSubject">
              <Input v-model="applyinfo.reqSubject" :readonly="ifedit" placeholder="XX公司(部门)+ XX项目申请入驻集中化平台" />
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="申请类型：" :prop="!ifedit?'alloType':''">
              <!-- <span >{{applyinfo.remark.alloType == 'first' ? '入驻申请':'扩容申请'}}</span> -->
              <Input v-if="ifedit" v-bind:value="applyType.find(e => e.key == applyinfo.remark.alloType) != undefined ? applyType.find(e => e.key == applyinfo.remark.alloType).typeName:''"
                :readonly="ifedit" />
              <Select v-else v-model="applyinfo.remark.alloType">
                <Option :value="i.key" v-for="(i,index) in applyType" :key="index">{{i.typeName}}</Option>
              </Select>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="入驻资源池：" prop="entrySysId">
              <Input v-if="ifedit" v-bind:value="applyinfo.remark.entrySysName" :readonly="ifedit" />
              <Select v-else v-model="applyinfo.remark.entrySysId" @on-change="checkSysName">
                <Option :value="i.id" v-for="(i,index) in allSysLists" :key="index">{{i.sysName}}</Option>
              </Select>
            </FormItem>
            </Col>
          </Row>
          <Row style="color: #bbb;padding-bottom: 10px" v-if="!ifedit">
            (注：仅项目经理可以选择租户和项目，来进行提单！)
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="提单租户：" prop="roleId">
              <Input v-if="ifedit" v-model="applyinfo.projectInfo.roleName" :readonly="readonly" />
              <Select v-else v-model="applyinfo.projectInfo.roleId" @on-change="checkRole" :disabled="ifedit">
                <Option :value="i.id" v-for="(i,index) in ProleList" :key="index">{{i.tenant_name}}</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="关联项目：" :prop="!ifedit?'projectId':''">
              <Input v-if="ifedit" v-model="applyinfo.projectInfo.projectName" :readonly="readonly" />
              <Select v-else v-model="applyinfo.projectInfo.projectId" @on-change="setProjectName" :disabled="ifedit">
                <Option :value="item.id" v-for="(item,index) in projectList" :key="index">{{item.project}}</Option>
              </Select>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="开始日期：">
              <Input v-model="applyinfo.projectInfo.entryStartTime" :readonly="readonly" />
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="结束日期：">
              <Input v-model="applyinfo.projectInfo.entryEndTime" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="入驻周期：">
              <Input v-model="applyinfo.projectInfo.entryCycle" :readonly="readonly" />
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="是否签订合同：">
              <Input v-model="applyinfo.projectInfo.isContract" :readonly="readonly" />
            </FormItem>
            </Col>
            <!-- <Col span="8" class="col_left">
                            <FormItem label="入驻位置：" >
                                <Input v-model="applyinfo.projectInfo.entryPosition" :readonly="readonly" />
                            </FormItem>
                        </Col> -->
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="项目类型：">
              <Input v-model="applyinfo.projectInfo.projectType" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="项目经理：">
              <Input v-model="applyinfo.projectInfo.projectManager" :readonly="readonly" />
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="经理联系方式:">
              <Input v-model="applyinfo.projectInfo.managerTel" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="运营人员：">
              <Input v-model="applyinfo.projectInfo.business" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="22" style="width:96.666667%">
            <FormItem label="项目主要功能介绍：">
              <Input v-model="applyinfo.projectInfo.projectDoc" type="textarea" :autosize="{minRows: 4,maxRows: 6}"
                :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </div>
    <!--使用人员信息-->
    <div id="usePeople" v-if="!isStepAll">
        <div class="qheader" :style="{borderBottom: '0px solid rgb(210,210,210)'}">
            <p>账号使用人员信息</p>
        </div>
        <div class="gcontent" v-if="ifedit">
            <template v-if="applyinfo.account.people.length > 0">
                <usePeople ref="usePeople" v-model="applyinfo.account.people" :ifedit="ifedit" :peopleList="applyinfo.account.peopleList" :isShow="editPeople"></usePeople>
            </template>
            <template v-else>
              <div class="gcontent" style="text-align:center">
                <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无账号使用人信息</span>
              </div>
            </template>
        </div>
        <div class="gcontent" v-else>
          <usePeople ref="usePeople" v-model="applyinfo.account.people" :ifedit="ifedit" :peopleList="applyinfo.account.peopleList" :isShow="editPeople"></usePeople>
        </div>
    </div>
  </div>
</template>
<script>
  import ajax from "../../../ajax_util"
  import personBase from '../person_baseInfo.vue'
  import usePeople from './usePeople.vue'
  export default {
    components: {
      personBase,usePeople
    },
    data() {
      const validatereqSubject = (rule, value, callback) => {
        if (this.applyinfo.reqSubject === '') {
          callback(new Error('填写工单标题'));
        } else {
          if (this.applyinfo.reqSubject.length > 50) {
            callback(new Error('最多填写50个字符'));
          } else {
            callback()
          }
        }
      };
      const validateAlloType = (rule, value, callback) => {
        if (this.applyinfo.remark.alloType == '') {
          console.log("ssssssssss")
          callback(new Error('请选择工单申请类型！'));
        } else {
          callback()
        }
      };
      const validateEntrySysId = (rule, value, callback) => {
        if (this.applyinfo.remark.entrySysId == '') {
          callback(new Error('请选择工单入驻系统！'));
        } else {
          callback()
        }
      };

      return {
        dataInfoEdit: 0,
        validate2: {
          reqSubject: [{
            required: true,
            validator: validatereqSubject,
            trigger: 'blur'
          }],
          roleId: [{
            required: true,
            type: 'number',
            message: '请选择租户角色',
            trigger: 'change'
          }, ],
          projectId: [{
            required: true,
            type: 'number',
            message: '请选择关联项目',
            trigger: 'change'
          }, ],
          alloType: [{
            required: true,
            validator: validateAlloType,
            trigger: 'change'
          }, ],
          entrySysId: [{
            required: true,
            validator: validateEntrySysId,
            trigger: 'change'
          }, ],
        },
        applyType: [{
            key: "first",
            typeName: "新租户入驻"
          },
          {
            key: "expand",
            typeName: "已有租户项目新增数据/资源扩容"
          },
          {
            key: "add_project",
            typeName: "已有租户新项目"
          },
          {
            key: "add_data",
            typeName: "已有租户项目新增数据"
          },
          {
            key: "add_resource",
            typeName: "已有租户项目资源扩容"
          },
        ],
        readonly: true, //是否只读
        labelWidth: 140,
        bealoonTrue: true,
        name: "",
        roleList: this.ProleList,
        //项目名称
        projectList: this.PprojectList,
        applyinfo: this.Papply,
        baseId: this.reqId + "base",
        projectInfoId: this.reqId + "project",
        allSysLists: []
      }

    },
    created: function() {
      this.getSys()
    },
    mounted: function() {},
    methods: {
      checkSysName(id) {
        this.applyinfo.remark.entrySysName = this.allSysLists.find(e => e.id == id).sysName
        this.$parent.$parent.getResourceList()
      },
      // 获取所属系统
      getSys() {
        var url = this.CONFIG.progress_url + "/system-map/for/paas"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.allSysLists = data
          }
        })
      },
      // //获取租户角色
      // getRoleLis(userId){
      //     var url = this.CONFIG.url_know + "/getRole/" + userId
      //     var that=this;
      //     ajax.get({
      //         url: url,
      //         that: that,
      //         params: null,
      //         success:function(data){
      //             that.roleList = data
      //         }
      //     })
      //     return that.roleList
      // },
      //项目基础信息
      //选择租户
      checkRole(roleId) {
        console.log("roleId--->", roleId)
        this.applyinfo.projectInfo = {}
        this.ProleList.some(item => {
          if (roleId == item.id) {
            this.applyinfo.projectInfo.roleId = roleId
            this.applyinfo.projectInfo.roleName = item.tenant_name
            console.log("projects--->", item.projects)
            this.projectList = item.projects
            return true
          }
        })

        // var url = this.CONFIG.url_know + "/getProjects/" + roleId
        // var that=this;
        // ajax.get({
        //     url: url,
        //     that: that,
        //     params: null,
        //     success:function(data){
        //         console.log("=====",data);
        //         that.projectList = data
        //     }
        // })
      },
      //设置项目名称
      setProjectName(value) {
        console.log(value)
        console.log("this.projectList------->", this.projectList)
        this.projectList.some(item => {
          if (item.id === value) {
            this.applyinfo.projectInfo.projectName = item.project
            console.log("item->", item)
            this.setProjectInfo(item)
            return true
          }
        })
      },
      //设置项目基础详情
      setProjectInfo(data) {
        // var info = {}
        var info = {}
        info.roleId = data.tenant_id
        if (data.tenant_name != null) {
          info.roleName = data.tenant_name
        }
        info.projectId = data.id
        info.projectName = data.project
        info.entryStartTime = this.utils.formatDate(new Date(data.create_time * 1000), "yyyy-MM-dd")
        info.entryEndTime = this.utils.formatDate(new Date(data.end_time * 1000), "yyyy-MM-dd")
        //info.entryStartTime =  data.create_time
        //info.entryEndTime = data.end_time
        info.entryCycle = data.cycle
        info.entryPosition = data.position
        info.isContract = data.isContract
        info.projectType = data.projectType
        info.projectManager = data.manager
        if (data.business == undefined || data.business == null || data.business == "") {
          info.business = data.tenant_business
        } else {
          info.business = data.business
        }
        info.managerTel = data.manager_phone
        info.projectDoc = data.des
        this.applyinfo.projectInfo = info
      },

      //数据清单
      //校验是否允许提交
      validate() {
        var isSubmit = false

        this.$refs["projectInfo3"].validate((valid) => {
          if (valid) {
            isSubmit = true
          } else {
            this.$Message.error('请填写入驻项目基本信息');
          }
        })

        if(isSubmit){
            var peopleValid = this.$refs.usePeople.validate();

            if(!peopleValid){
                isSubmit = false;
            }
        }

        return isSubmit
      },
      //格式化日期
      formatDate(value) {
        var date = new Date(value * 1000);
        var year = date.getFullYear();
        var month = this.padDate(date.getMonth() + 1);
        var day = this.padDate(date.getDate());
        var hours = this.padDate(date.getHours());
        var minutes = this.padDate(date.getMinutes());
        var seconds = this.padDate(date.getSeconds());
        return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
      },
      padDate(value) {
        return value < 10 ? '0' + value : value;
      },
    },
    props: {
      isPrint: {
        default: false
      },
      reqId: {
        default: ""
      },
      ifedit: {},
      Papply: {},
      ProleList: {},
      PprojectList: {},
      editPeople:{},
      isStepAll: {}
    },
    watch: {
      PprojectList(newV, oldV) {
        this.projectList = newV
      }
    }
  }
</script>
